<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <div>
          <a-form
            size="small"
            ref="searchFormRef"
            :model="searchForm"
            layout="inline"
            label-align="right"
          >
            <a-form-item label="公司" field="firm">
              <a-cascader
                v-model="searchForm.firmId"
                :options="firmOptions"
                allow-clear
                class="bacClass"
                :style="{ width: '220px' }"
                popup-container="html"
              />
            </a-form-item>
            <a-form-item label="布号">
              <a-input
                allow-clear
                :style="{ width: '200px' }"
                class="bacClass"
                placeholder=""
                v-model="searchForm.clothCode"
                @press-enter="doRefresh"
              />
            </a-form-item>
            <a-form-item label="品名">
              <a-input
                allow-clear
                :style="{ width: '200px' }"
                class="bacClass"
                placeholder=""
                v-model="searchForm.brandName"
                @press-enter="doRefresh"
              />
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <el-button type="primary" :icon="Search" @click="selectHandler" v-hasPermi="['cpckc.cx']">查询</el-button>
      </div>
    </template>
    <template #pageTabel>
      <a-spin :loading="onLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
        <div style="width: 100%; height: 100%">
          <encapsulation-agrid ref="table1Ref" :configaggrid="configaggrid"></encapsulation-agrid>
        </div>
      </a-spin>
    </template>
  </pageTabelLayout>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { tableColumns } from './tableConfig/index.ts'
  import { post } from '@/api/http'
  import { Message } from '@arco-design/web-vue'
  import { Search } from '@element-plus/icons-vue'
  onMounted(() => {
    getFirmOptions()
  })
  const headerShow = ref<boolean>(true)
  const onLoading = ref<boolean>(false)
  const searchForm = reactive<any>({
    clothCode: '',
    brandName: '',
    firmId: '',
  })
  const searchFormRef = ref<any>(null)
  const firmOptions = ref<any>([])
  // 获取公司下拉框
  const getFirmOptions = () => {
    post({
      url: 'org/baCompany/getTreeCompanyByUser',
      data: {},
    }).then((result: any) => {
      if (result.code === 200) {
        firmOptions.value = result.data
      } else {
        Message.error(result.message)
      }
    })
  }
  const table1Ref = ref<any>(null)
  let configaggrid = ref({
    url: '/wms/ProductStock/getPage', //接口路径
    queryData: {
      //接口参数
      companyId: searchForm.firmId,
      clothCode: searchForm.clothCode,
      brandName: searchForm.brandName,
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接
    rowMultiSelectWithClick: true, //点击行是否多选
    column: tableColumns,
    fileName: 'FinishedGoodsStorage-1',
  })
  const doRefresh = async () => {
    try {
      if (onLoading.value) return
      onLoading.value = true
      await table1Ref.value.setQuery({
        companyId: searchForm.firmId,
        clothCode: searchForm.clothCode,
        brandName: searchForm.brandName,
      })
    } catch (e) {
      console.log(e)
    } finally {
      onLoading.value = false
    }
  }
  const selectHandler = () => {
    doRefresh()
  }
</script>
<style scoped>
  #Table td,
  #Table th {
    border: 1px solid #ccc;
    padding: 10px;
  }

  .tdStyle {
    min-width: 100px;
  }

  .notClick {
    background-color: gray;
    cursor: no-drop;
  }

  :deep(.SendCheck) {
    z-index: 100 !important;
  }

  :deep(.arco-table-th) {
    border-right: 1px solid var(--color-neutral-3);
  }

  :deep(.arco-table-td) {
    border-right: 1px solid var(--color-neutral-3);
  }
</style>
